<template>
  <div id="app">
    <h3>{{ message }}</h3>
    <h3>counter={{ counter }}</h3>
    <h3>$store.state.counter={{ $store.state.counter }}</h3>
    <div>
      <button @click="add">+</button>
      <button @click="cadd">+延迟2秒</button>
      <button @click="sub">-</button>
      <button @click="caddCount(5)">+异步延迟两秒promise</button>
      <button @click="addCount(5)">+5</button>
      <button @click="subCount(5)">-5</button>
      <button @click="addstudent()">添加学生</button>
    </div>
    <hr />
    <h3>方式1：父传子方式获取counter值</h3>
    <propsmethod :counter="counter"></propsmethod>
    <hr />
    <h3>方式2：$store.state.counter</h3>
    <vuexcpn></vuexcpn>
    <hr />
    <h3>方式3：$store.getters相关信息</h3>
    <h3>getters获取平方：{{ $store.getters.powerCounter }}</h3>
    <h3>computed:{{ more20stu }}</h3>
    <h3>
      getters:{{ $store.getters.more20stu }} 数量为：{{
        $store.getters.more20stuleng
      }}
    </h3>
    <h3>传参数21：{{ $store.getters.moreAgestu(21) }}</h3>
  </div>
</template>

<script>
import propsmethod from '@/components/propsmethod'
import vuexcpn from '@/components/vuexcpn'

export default {
  name: 'App',
  data () {
    return {
      message: '我是APP组件',
      counter: 0
    }
  },
  components: {
    propsmethod,
    vuexcpn
  },
  methods: {
    add () {
      this.counter++

      // this.$store.commit('方法里面的名称')
      this.$store.commit('increase')
    },
    cadd () {
      // 通过ACTION异步增加

      this.counter++
      this.$store.dispatch('aincrease')

      // this.$store.commit('方法里面的名称')
    },
    caddCount (count) {
      this.counter = this.counter + count

      // this.$store.commit('方法里面的名称')
      this.$store.dispatch('aincreaseCounter', count).then(res => {
        console.log(res)
      })
    },
    addCount (count) {
      this.counter = this.counter + count

      // this.$store.commit('方法里面的名称')
      this.$store.commit('increaseCount', count)
    },
    subCount (count) {
      this.counter = this.counter - count

      // this.$store.commit({对象})
      this.$store.commit({
        type: 'decreaseCount',
        count: count
      })
    },
    sub () {
      this.counter--

      // this.$store.commit('方法里面的名称')
      this.$store.commit('decrease')
    },
    addstudent () {
      let stu = { id: 0, name: '00', age: 30 }
      this.$store.commit('addstudent', stu)
    }
  },
  computed: {
    more20stu () {
      return this.$store.state.students.filter(s => {
        return s.age > 20
      })
    }
  }
}
</script>

<style></style>
